import React, { useState } from "react";
import PaginationSelect from "./components/PaginationSelect/PaginationSelect";
import OSSUploader from "./components/OSSUploader/OSSUploader";

interface UserValue {
  label: string;
  value: string;
  avatar?: string;
}

const App: React.FC = () => {
  const [value, setValue] = useState<UserValue[]>([]);
  const fetchUserList = async ({
    page,
    pageSize,
    keyword,
  }: {
    page: number;
    pageSize: number;
    keyword: string;
  }): Promise<{
    list: UserValue[];
    total: number;
  }> => {
    const list = await fetch(
      `https://660d2bd96ddfa2943b33731c.mockapi.io/api/users/?search=${keyword}`
    )
      .then((res) => res.json())
      .then((res) => {
        const results = Array.isArray(res) ? res : [];
        return results;
      });
    const start = (page - 1) * pageSize;
    const end = start + pageSize;
    const filterUserList = list.slice(start, end);
    const newList = filterUserList.map((user) => ({
      label: user.name,
      value: user.id,
      avatar: user.avatar,
    }));
    return {
      list: newList,
      total: list.length,
    };
  };
  const fetchSTSToken = async () => {
    const response = await fetch("/api/get_sts_token", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    });
    if (!response.ok) {
      throw new Error("获取STS Token失败");
    }
    return response.json();
  };
  return (
    <>
      {/* <PaginationSelect
        mode="multiple"
        value={value}
        placeholder="Select Users"
        fetchOptions={fetchUserList}
        style={{ width: "100%" }}
        onChange={(newValue) => {
          if (Array.isArray(newValue)) {
            setValue(newValue);
          }
        }}
        pageSize={10}
      /> */}
      <OSSUploader
        OSSRegion="oss-cn-beijing"
        OSSBucket="zhuzian-111"
        getSTSToken={fetchSTSToken}
      />
    </>
  );
};

export default App;
